<template>
    <div class="country-page">
        <back title="选择国家或地区"></back>
        <cube-index-list :data="resultList">
            <cube-index-list-group
                v-for="(group, index) in resultList"
                :key="index"
                :group="group">
                <cube-index-list-item
                v-for="(item, index) in group.items"
                :key="index"
                :item="{val:item[1]}"
                @select="selectItem">
                <div class="custom-item"><span>{{item[0]}}</span>{{item[1]}}</div>
                </cube-index-list-item>
            </cube-index-list-group>
        </cube-index-list>
    </div>
</template>

<style lang="stylus">
.country-page{
    width 100%
    height 100%
    text-align left
    position relative
    padding-top 50px
    .cube-index-list-content{
        background transparent
        padding 0 20px
        .cube-index-list-item{
            color #a2a2a2
            border-bottom 1px solid #ededed
            height 50px
            line-height 50px
            font-size 14px;
            .custom-item{
                display flex
                padding-right 20px
                span{
                    flex 1
                }
            }
        }
        .cube-index-list-anchor{
            color #333
            font-size 16px
            background transparent
            padding 10px 0
        }
    }
    .cube-index-list-anchor{
        color #333
        font-size 16px
        background #b0b0b0
        padding 10px 20px
    }
}
</style>

<script>
import '@/util/pinyinUtil'
import country from '@/util/country_num_ch.json'
export default {
    data() {
        return {
            resultList:[],
            rountryList:[]
        }
    },
    created(){
        this.country();
    },
    mounted(){
        this.getPinyin();
    },
    methods: {
        country(){
				this.rountryList = country.array;
        },
        getPinyin(){
            var result=[];
            this.rountryList.forEach((item,index)=>{
                var str=item[1][0].charAt(0)
                var type=pinyinUtil.getFirstLetter(str)

                if(type){
                    var obj={name:type,items:item};
                    this.resultList.push(obj)
                }
            })
        },
        selectItem(item) {
            this.$store.commit('setAre',item.val)
            this.$router.back();
        }
    }
}
</script>

